<template>
	<div>
		<div class="crumbs">
		    <el-breadcrumb separator="/">
		        <el-breadcrumb-item><i class="el-icon-date"></i>专场</el-breadcrumb-item>
		        <el-breadcrumb-item>生成专场</el-breadcrumb-item>
		    </el-breadcrumb>
		</div>
		<el-form ref="form" :model="form" label-width="90px">	
			<div class="plugins-tips">
			   公共部分
			</div>
			<el-form-item label="专场名称">
				<el-input v-model="form.name" placeholder="请输入专场名称"></el-input>
			</el-form-item>
			<el-form-item label="专场类型">
			    <el-select v-model="form.operType" placeholder="请选择专场类型">
			      <el-option label="普通专场" value="1"></el-option>
			      <el-option label="吱吱专场" value="2"></el-option>
			    </el-select>
			  </el-form-item>
			<el-form-item v-if="form.operType==2" label="专场副标题">
				<el-input v-model="form.subTitle" placeholder="请输入专场副标题"></el-input>
			</el-form-item>
			<el-form-item label="按钮颜色">
				<el-input v-model="form.btnColor" placeholder="请输入按钮颜色"></el-input>
			</el-form-item>
			<el-form-item label="排序">
				<el-input v-model="form.sort" placeholder="默认是0,0表示最后,值越大排在月前面,值相同的情况下新生成的排在前面"></el-input>
			</el-form-item>
			
			<el-form-item label="商品筛选">
				<el-select v-model="form.selectType" placeholder="请选择筛选商品类别">
			      <el-option label="商品ID" value="4"></el-option>
			      <el-option label="供应商ID" value="2"></el-option>
			      <el-option label="标签ID" value="3"></el-option>
			      <el-option label="品牌ID" value="1"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item v-if="form.selectType" label="筛选条件">
				<el-input v-model="form.selectParam" placeholder="请输入筛选条件"></el-input>
			</el-form-item>
			<el-form-item label="专场时间">
				<el-date-picker
				      v-model="form.value3"
				  	  change="changeTime"
				      type="datetimerange"
				      placeholder="选择时间范围">
				    </el-date-picker>
			</el-form-item>
			<el-form-item label="开启专场">
				<el-switch on-text="是" off-text="否" v-model="form.isOpen"></el-switch>
			</el-form-item>
			<el-form-item label="入口图">
				<el-upload
				  class="avatar-uploader"
				  action="/upload/location"
				  :show-file-list="false"
				  multiple
				  :on-success="upIconSuccess"
				  :on-error="uploadFail">
				  <img v-if="page.iconUrl" :src="page.iconUrl" class="avatar">
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			
			<div class="plugins-tips">
			   pc部分
			</div>
			<el-form-item label="展示商品">
				<el-switch on-text="是" off-text="否" v-model="form.isShowPcProduct"></el-switch>
			</el-form-item>
			<el-form-item label="背景颜色">
				<el-input v-model="page.pcBgColor" placeholder="请输入pc页面背景颜色"></el-input>
			</el-form-item>
			<el-form-item label="banner图片">
				<el-upload
				  	class="pc-banner-uploader"
				 	action="/upload/location"
				  	:show-file-list="false"
				  	:on-success="upBannerSuccess"
				  	:on-error="uploadFail">
				  	<img v-if="page.bannerUrl" :src="page.bannerUrl" class="pc-banner-uploader">
				  	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="品牌宣传图">
				<div class="c_pc_brand_wrap" v-if="page.pcBrandList.length">
					<div class="c_pc_brand_list">
						<div v-for="(item,index) in page.pcBrandList" class="c_pc_brand_item">
							<div style="width:100%;position:relative;">
								<vue-drr :w='150' :h='100' :rotatable='false' handle='.dragme' :bounds='{parent:true}' v-for="val in item.area" v-on:handleUp="showChange" :id='item.uid' :aid='val.aid' >
							    	<div class='dragme'> drag me here </div>
							   	</vue-drr>
								<img :src="item.url" alt="" style="width:100%;">
							</div>
							<div class="c_img_link_btn_wrap">
								<el-button :plain="true" type="info" @click="addAreaLink(item.uid,1,true)">添加区域链接</el-button>
								<el-button :plain="true" type="info" @click="addAreaLink(item.uid,2,true)">添加优惠券链接</el-button>
								<el-button :plain="true" type="danger" @click="removeImg(item.uid,true)">删除该图</el-button>
							</div>
							<div v-if="item.area.length" class="c_area_content_list">
								<li v-for="val in item.area">
									<el-input
									  placeholder="坐标,不可输入"
									  v-model="val.coords"
									  disabled="disabled"
									  >
									</el-input>
									<el-input
									  placeholder="请输入链接"
									  v-model="val.link"
									  >
									</el-input>
									<el-button :plain="true" type="danger" @click="removeAreaLink(item.uid,val.aid,true)" class="c_link_del_btn">
										删除该区域
									</el-button>
								</li>
							</div>

						</div>
					</div>
				</div>
				<el-upload
				  class="c_pc_brand_upload"
				  action="/upload/location"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove"
				  :on-success="upPcBrandSuccess"
				  :on-error="uploadFail"
				  :show-file-list="false"
				  >
				  <el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</el-form-item>
			
			<div class="plugins-tips">
			   移动端部分
			</div>
			<el-form-item label="展示商品">
				<el-switch on-text="是" off-text="否" v-model="form.isShowWapProduct"></el-switch>
			</el-form-item>
			<el-form-item label="背景颜色">
				<el-input v-model="form.wapBgColor" placeholder="请输入wap页面背景颜色"></el-input>
			</el-form-item>
			<el-form-item label="品牌宣传图">
				<div class="c_pc_brand_wrap" v-if="page.wapBannerList.length">
					<div class="c_pc_brand_list">
						<div v-for="(item,index) in page.wapBannerList" class="c_pc_brand_item">
							<div style="width:100%;position:relative;">
								<vue-drr :w='150' :h='100' :rotatable='false' handle='.dragme' :bounds='{parent:true}' v-for="val in item.area" v-on:handleUp="showMobileChange" :id='item.uid' :aid='val.aid' >
							    	<div class='dragme'> drag me here </div>
							   	</vue-drr>
								<img :src="item.url" alt="" style="width:100%;">
							</div>
							<div class="c_img_link_btn_wrap">
								<el-button :plain="true" type="info" @click="addAreaLink(item.uid,1,false)">添加区域链接</el-button>
								<el-button :plain="true" type="info" @click="addAreaLink(item.uid,2,false)">添加优惠券链接</el-button>
								<el-button :plain="true" type="danger" @click="removeImg(item.uid,false)">删除该图</el-button>
							</div>
							<div v-if="item.area.length" class="c_area_content_list">
								<li v-for="val in item.area">
									<el-input
									  placeholder="坐标,不可输入"
									  v-model="val.coords"
									  disabled="disabled"
									  >
									</el-input>
									<el-input
									  placeholder="请输入链接"
									  v-model="val.link"
									  >
									</el-input>
									<el-button :plain="true" type="danger" @click="removeAreaLink(item.uid,val.aid,false)" class="c_link_del_btn">
										删除该区域
									</el-button>
								</li>
							</div>

						</div>
					</div>
				</div>
				<el-upload
				  class="c_pc_brand_upload"
				  action="/upload/location"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove"
				  :on-success="upMobileBrandSuccess"
				  :on-error="uploadFail"
				  :show-file-list="false"
				  >
				  <el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</el-form-item>
		</el-form>
		<el-dialog v-model="page.dialogVisible" size="tiny">
		  <img width="100%" :src="page.dialogImageUrl" alt="">
		</el-dialog>
		<el-button type="primary" @click="onSubmit">主要按钮</el-button>
	</div>
</template>

<script>
	import VueDRR  from 'vue-drag-resize-rotate';
	export default {
		components: {
		    'vue-drr': VueDRR
		},
		mounted:function(){
		},
		data: function(){
            return  {
                form:{
                	name:'',
                	subTitle:'',
                	operType:'',
                	btnColor:'',
                	isOpen:true,
                	selectType:'',
                	selectParam:'',
                	sort:'',
            		value3:'',
            		iconImgName:'',
            		isShowPcProduct:'',
            		pcBgColor:'',
            		isShowWapProduct:'',
            		wapBgColor:'',
            		fileList:'',
            		bannerImgName:'',
            		pcBrandList:[]
                },
                page:{
                	iconUrl:'',
                	bannerUrl:'',
                	dialogImageUrl:'',
                	dialogVisible:false,
                	pcBrandList:[],
                	showPcBrandImg:false,
                	wapBannerList:[]
                }
        	}
   		},

   		methods:{
   			// 看看能不能把所有的都统一用这两个方法来处理
		    onSubmit:function(){
		    	console.log(JSON.stringify(this.page.pcBrandList));
		    },
	        upBannerSuccess:function(res,file){
	        	this.page['bannerUrl'] = URL.createObjectURL(file.raw);
	        	this.form['bannerImgName'] = res.name;
	        },
	        upIconSuccess:function(res,file){
	        	this.page['iconUrl'] = URL.createObjectURL(file.raw);
	        	this.form['iconImgName'] = res.name;
	        },
	        uploadFail:function(err,file,fileList){
	        	this.$message({
	        		message:'啊哦，图片没有上传成功，请联系冰冰来看看',
	        		type:'error',
	        		showClose:true,
	        		duration:'5000'
	        	});
	        	console.log(err);
	        },
	        upPcBrandSuccess:function(res,file){
	        	// this.form.pcBrandList.push(res.name);
	        	let obj = {
	        		url:URL.createObjectURL(file.raw),
	        		uid:file.uid,
	        		area:[]
	        	}
	        	this.page.pcBrandList.push(obj);
	        	// 到时候要找的时候只能用es6的方法了，支持es6只能是新版本的chrome和FF 或者edge下了。
	        	// 否则比较傻叉的方法就是...遍历 
	        },
	        upMobileBrandSuccess:function(res,file){
	        	let obj = {
	        		url:URL.createObjectURL(file.raw),
	        		uid:file.uid,
	        		area:[]
	        	}
	        	this.page.wapBannerList.push(obj);
	        },
	        handleRemove:function(file, fileList) {
               	// 对应的要删除 pcBrandList 的数据，那么就要有一条索引，通过什么来建立索引呢？
               	console.log(file.uid);
            },
            // 删除照片
            removeImg:function(uid,isPc){
            	let list = isPc? 'pcBrandList':'wapBannerList';
            	var index = this.page[list].findIndex(function(x){
            		return x.uid === uid
            	})
            	// 然后就要干掉数组里位置为index里边的东东
            	index>=0 && this.page[list].splice(index,1);
            },
            handlePictureCardPreview(file) {
               	this.page.dialogImageUrl = file.url;
               	this.page.dialogVisible = true;
            },
            addAreaLink:function(uid,type,isPc){
            	// 要插入一条数据
            	let list = isPc? 'pcBrandList':'wapBannerList';
            	let obj = this.page[list].find(function(x){
            		return x.uid === uid;
            	})
            	obj.area.push({
            		coords:'',
            		link:'',
            		aid: Math.round(new Date().getTime()/1000)
            	});
            	// 同时插入一个框框  
            },
            removeAreaLink:function(uid,aid,isPc){
            	let list = isPc? 'pcBrandList':'wapBannerList';
            	var obj = this.page[list].find(function(x){
            		return x.uid === uid;
            	})
            	var index = obj.area.findIndex(function(y){
            		return y.aid === aid;
            	})
            	obj.area.splice(index,1);
            },
            showChange:function(data){
            	let coords = ''+data.x+','+data.y+','+(data.x+data.w)+','+(data.h)
            	var obj = this.page.pcBrandList.find(function(x){
            		return x.uid === data.uid;
            	})
            	if(obj){
            		let params = obj.area.find(function(j){
            			return j.aid === data.childId;
            		})
            		params.coords = coords;
            	}
            },
            showMobileChange:function(data){
            	let coords = ''+data.x+','+data.y+','+(data.x+data.w)+','+(data.h)
            	var obj = this.page.wapBannerList.find(function(x){
            		return x.uid === data.uid;
            	})
            	if(obj){
            		let params = obj.area.find(function(j){
            			return j.aid === data.childId;
            		})
            		params.coords = coords;
            	}
            }
   		}
	}
</script>

<style>
  .pc-banner-uploader,.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar-uploader .el-upload--text{
  	width: 415px;
  	height: 155px;
  }
  .avatar {
    width: 415px;
    height: 155px;
    display: block;
  }
  .pc-banner-uploader .el-upload--text{
	width: 480px;
	height: 150px;
  }
  .pc-banner-uploader {
    width: 480px;
    height: 150px;
    display: block;
  }
  .c_pc_brand_wrap{
  	width: 100%;
  }
  .c_pc_brand_list{
  	width:1040px;
  	overflow: hidden;
    margin: 0 auto;
  }
  .c_pc_brand_item{
	width: 100%;
	position: relative;
	overflow: hidden;
	padding-bottom: 40px;
	border-bottom: 1px dashed #d9d9d9;
  }
  .c_img_link_btn_wrap{
  	text-align: center;
  	margin: 20px 0;
  }
  .c_pc_brand_upload .el-upload  { 
	display: block;
  }
  .content .dragable[data-v-1703521c]{
  	border:1px dashed #d9d9d9;
  }
  .dragme{
  	margin:0 auto;
  	width:90px;
  	height:30px;
  	line-height:30px;
  	background: #fff;
  	border: 1px dashed #d9d9d9;
  	padding:5px;
  }
  .c_area_content_list li{
  	list-style:none;
  }
  .c_area_content_list .el-input{
  	width: 40%;
  	float: left;
  }

</style>